<template>
  <div class="client-layout">
    <ClientNavbar />
    <div class="content-wrapper">
      <ClientSidebar />
      <main class="main-content">
        <router-view />
      </main>
    </div>
    <Footer />
  </div>
</template>
<script setup>
import ClientNavbar from '@/components/global/ClientNavbar.vue';
import ClientSidebar from '@/components/global/ClientSidebar.vue'; // Import ClientSidebar
import Footer from '@/components/global/Footer.vue';
</script>
<style scoped>
.client-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.client-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content-wrapper {
  display: flex;
  flex-grow: 1; /* Allows content-wrapper to take available vertical space */
}

.main-content {
  flex-grow: 1; /* Allows main content to take available horizontal space */
  padding: 1.5rem; /* Increased padding for better spacing */
  background-color: #fff; /* White background for content area */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); /* Subtle shadow */
  margin: 1rem; /* Margin around the main content area */
  border-radius: 8px; /* Rounded corners */
}
</style>
